<template>
	<view class="app">
		<view class="Setting">
			<AppNavbar :bgColor="'#ededed'" title="Login Device management" titlecolor="#000" leftIconColor="#000"
				righticon="more" @rightClick="rightClickFun" fontWeight="600">
			</AppNavbar>
			<view class="Setting-tip f-size-12 px-1 color-grey ">
				Your account has been logged in to the following devices,you can delete the device, after deleting the
				device to login to the security verification.
			</view>
			<view class="Setting-tip f-size-12 px-2 mt-3 color-grey u-flex-content-start u-flex-items-center">
				You have logged in to the device
			</view>
			<mySettings :list="abilitys" class="mt-1" :lastLine="false"></mySettings>
			<view class="Setting-tip f-size-12 px-2 mt-3 color-grey u-flex-content-start u-flex-items-center">
				The device has exited
			</view>
			<mySettings :list="abilitys2" class="mt-1" :buttonShow="buttonShow" :lastLine="true"></mySettings>
		</view>

	</view>
</template>

<script setup>
	import {
		getLoginDeviceListApi
	} from '@/api/loginDevice.js'
	onMounted(async () => {

		const res = await getLoginDeviceListApi({
			pushId: 2
		})
		console.log(res);
	})
	const show = ref(false)
	const buttonShow = ref(false)
	const abilitys = reactive([{
			label: "Mi 13",
			centerValue: 'Current device'
		},
		{
			label: "Red Rice k50",

		}

	])
	const abilitys2 = reactive([{
			label: "030",
			contentValue: 'May 2,21:05'
		},
		{
			label: "029",
			contentValue: 'May 2,21:05'
		},
		{
			label: "fx014",
			contentValue: 'May 2,21:05'


		},
	])

	function goto(url) {
		uni.$to(url)
	}

	function rightClickFun() {
		console.log('hah');
		buttonShow.value = !buttonShow.value
	}
</script>

<style lang="scss" scoped>
	.app {
		.Setting {

			// border: 1px solid red;
			background-color: #ededed;


			.Setting-abilitys {
				// border: 1px solid red;
				background-color: #fff;

				.Setting-ability-item {
					flex-wrap: wrap;

					.Setting-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.Setting-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>